<template>
  <div class="app-service-center-content-monitor__center__goal" v-show="show">
    <div class="app-service-center-content-monitor__center__goal__today">
      <div class="app-service-center-content-monitor__center__goal__today__left-part">
        <div class="app-service-center-content-monitor__center__goal__today__left-part__part-3">
          <div class="app-service-center-content-monitor__center__goal__today__left-part__part-3__title">每日 [番茄目标]</div>
          <div class="app-service-center-content-monitor__center__goal__today__left-part__part-3__step">日日耕耘，必有收获。相信每一天的努力，相信更好的明天！</div>
          <div class="app-service-center-content-monitor__center__goal__today__left-part__part-3__setTarget">
            <t-button size="mini" type="primary" @click="openUpdateDialog">目标设定</t-button>
          </div>
        </div>
        <div class="app-service-center-content-monitor__center__goal__today__left-part__part-1">
          <div class="app-service-center-content-monitor__center__goal__today__left-part__part-1__info">
            <div class="app-service-center-content-monitor__center__goal__today__left-part__part-1__info__title">[习惯番茄]</div>
            <div class="app-service-center-content-monitor__center__goal__today__left-part__part-1__info__done">今日完成 : {{ store.todayHabitTomatoAmount }} 颗</div>
            <div class="app-service-center-content-monitor__center__goal__today__left-part__part-1__info__todo">每日目标 : {{ store.todayHabitTomatoAmountTarget }} 颗</div>
          </div>
          <t-progress-circle :status = "todayHabitStatus":percent="todayHabitPercentage" class="app-service-center-content-monitor__center__goal__today__left-part__part-1__circle-progress">
            <div slot="title">今日完成率</div>
            <div slot="rate">{{ todayHabitPercentage }} %</div>
          </t-progress-circle>              
        </div>
        <div class="app-service-center-content-monitor__center__goal__today__left-part__part-2">
          <div class="app-service-center-content-monitor__center__goal__today__left-part__part-2__info">
            <div class="app-service-center-content-monitor__center__goal__today__left-part__part-2__info__title">[专题番茄]</div>
            <div class="app-service-center-content-monitor__center__goal__today__left-part__part-2__info__done">今日完成 : {{ store.todayTopicTomatoAmount }} 颗</div>
            <div class="app-service-center-content-monitor__center__goal__today__left-part__part-2__info__todo">每日目标 : {{ store.todayTopicTomatoAmountTarget }} 颗</div>
          </div>
          <t-progress-circle :status = "todayTopicStatus" :percent="todayTopicPercentage" class="app-service-center-content-monitor__center__goal__today__left-part__part-2__circle-progress">
            <div slot="title">今日完成率</div>
            <div slot="rate">{{ todayTopicPercentage }} %</div>
          </t-progress-circle>  
        </div>
      </div>
    </div>
    <div class="app-service-center-content-monitor__center__goal__mtopic">  
      <div class="app-service-center-content-monitor__center__goal__mtopic__left-part">
        <div class="app-service-center-content-monitor__center__goal__mtopic__left-part__title">千番计划</div>
        <div class="app-service-center-content-monitor__center__goal__mtopic__left-part__content">
          <t-table :items="store.tableData" size="mini" border stripe>
            <t-table-column label="阶段" prop="name" id="0" width="2"></t-table-column>
            <t-table-column label="目标" prop="target" id="1" width="4"></t-table-column>
            <t-table-column label="状态" prop="value" id="2" width="2"></t-table-column>
            <t-table-column label="奖励" prop="win" id="3" width="4"></t-table-column>
          </t-table>
        </div>
      </div>
      <div class="app-service-center-content-monitor__center__goal__mtopic__right-part">
        <t-progress-circle :status = "totalStatus" :percent="totalPercentage" >
          <div slot="title">
            <div>目标：1000 颗</div>
            <div>当前：{{ store.tomatoAmount }} 颗</div>
          </div>
          <div slot="rate">完成率：{{ totalPercentage }} %</div>
        </t-progress-circle>
      </div>
    </div>
    <state-update-dialog :store="store" @close="closeUpdateDialog"></state-update-dialog>
  </div>
</template>

<script>
  import TTable from '@/components/table';
  import TTableColumn from '@/components/table/table-column';
  import TProgressCircle from '@/components/progress-circle';
  import TButton from '@/components/button';
  import StateUpdateDialog from '@/app/service/center/content/state/update-dialog';

  export default {
    name: 'app-service-center-content-monitor-tomato',
    components: {
      TTable,
      TTableColumn,
      TProgressCircle,
      TButton,
      StateUpdateDialog,
    },
    props: {
      show: Boolean,
      tars: {
        type: Object,
        required: true,
      },
    },
    watch: {
      tars(val) {
        this.store.todayHabitTomatoAmount = val.todayHabitTomatoAmount;
        this.store.todayHabitTomatoAmountTarget = val.todayHabitTomatoAmountTarget;
        this.store.todayTopicTomatoAmount = val.todayTopicTomatoAmount;
        this.store.todayTopicTomatoAmountTarget = val.todayTopicTomatoAmountTarget;
        this.store.tomatoAmount = val.tomatoAmount;
      },
    },
    computed: {
      todayHabitStatus() {
        if (this.todayHabitPercentage >= 100) {
          return 'success';
        }
        return 'normal';
      },
      todayHabitPercentage() {
        if (this.store.todayHabitTomatoAmountTarget > 0) {
          /* eslint-disable max-len */
          const per = (this.store.todayHabitTomatoAmount / this.store.todayHabitTomatoAmountTarget) * 100;
          return Number(per.toFixed(2));
        }
        return Number(0.00);
      },
      todayTopicStatus() {
        if (this.todayTopicPercentage >= 100) {
          return 'success';
        }
        return 'normal';
      },
      todayTopicPercentage() {
        if (this.store.todayTopicTomatoAmountTarget > 0) {
          /* eslint-disable max-len */
          const per = (this.store.todayTopicTomatoAmount / this.store.todayTopicTomatoAmountTarget) * 100;
          return Number(per.toFixed(2));
        }
        return Number(0.00);
      },
      totalStatus() {
        if (this.totalPercentage >= 100) {
          return 'success';
        }
        return 'normal';
      },
      totalPercentage() {
        if (this.store.tomatoAmount <= 1000) {
          const per = this.store.tomatoAmount / 10.0;
          return Number(per.toFixed(2));
        }
        if (this.store.tomatoAmount <= 5000) {
          const per = this.store.tomatoAmount / 50.0;
          return Number(per.toFixed(2));
        }
        const per = this.store.tomatoAmount / 100.0;
        return Number(per.toFixed(2));
      },
    },
    data() {
      return {
        store: {
          updateDialog: {
            title: '修改每日番茄目标',
            visible: false,
          },
          todayHabitTomatoAmount: 0,
          todayHabitTomatoAmountTarget: 0,
          todayTopicTomatoAmount: 0,
          todayTopicTomatoAmountTarget: 0,
          tomatoAmount: 0,
          tableData: [{
            name: '阶段1',
            target: '[番茄总量] 达到 [1000 颗]',
            state: '进行中',
            win: '黄色手环',
          }, {
            name: '阶段2',
            target: '[番茄总量] 达到 [5000 颗]',
            state: '待完成',
            win: '橙色手环',
          }, {
            name: '终结',
            target: '[番茄总量] 达到 [10000 颗]',
            rate: '待完成',
            win: '紫色手环',
          }],
        },
      };
    },
    methods: {
      openUpdateDialog() {
        this.store.updateDialog.visible = true;
      },
      closeUpdateDialog() {
        this.store.updateDialog.visible = false;
      },
    },
  };
</script>

<style>
</style>